<template>
  <div>
    <div class="font-27 font-w font-white mar-t-9">{{orderStatusType}}</div>
    <div class="delivery-info-box mar-b-10 mar-t--9">
      <div class="bg-color-white panel-box">
        <!-- 门店配送-->
        <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white" v-if="order.deliveryType === 1">
          <div class="flex-col">
            <div class="flex flex-between">
              <div class="flex-col">
                <div class="address-info">
                  <span class="label-ad-sp mar-t-7">
                    <span
                      v-if="order.addressLabel"
                      class="font-11 width-30 height-15 flex flex-center mar-r-10 font-normal"
                      :class="'label-'+ order['labelStyle']">
                      <span>{{order.addressLabel}}</span>
                    </span>
                  </span>
                  <span class="font-color font-18 font-w">{{order.customerAddress}}</span>
                </div>
                <span class="font-13 font-color-6">{{order.customerNickname}} {{order.customerPhone}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 门店自提/社团-->
        <div class="panel-body pad-l-15 pad-r-15 pad-b-12 pad-t-12 bg-color-white" v-if="order.deliveryType === 2">
          <div class="font-15 font-color">
            <div class="flex mar-b-8">
              <span class="font-w">提货人：</span>
              <span class="font-w">{{nicknameAdd}} {{phoneAdd}}</span>
            </div>
            <div class="flex flex-between mar-b-8">
              <div class="flex">
                <span class="font-w">提货点：</span>
                <span class="font-w">{{order.memberStore.storeName}}</span>
              </div>
              <div class="flex v-align-c btn-box">
                <span class="height-14 v-line mar-r-6">|</span>
                <div class="flex v-align-c" @click="callPhone">
                  <img class="width-12 height-12" v-if="fileSpace" :src="fileSpace + '/images/phone-icon.png'" alt="">
                  <span class="font-15 mar-l-4">联系团长</span>
                </div>
              </div>
            </div>
            <div class="flex address-box">
              <div class="flex">
                <span class="font-w">地&nbsp;&nbsp;&nbsp;址：</span>
                <div class="width-149 text-align-j font-color-6">
                  {{order.memberStore.storeAddress}}
                </div>
              </div>
              <div class="flex v-align-c btn-box">
                <span class="height-14 v-line mar-r-6">|</span>
                <div class="flex v-align-c" @click="goWxLocal">
                  <van-icon name="map-marked" />
                  <span class="font-15 mar-l-4">导航前往</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="prompt font-12 pad-t-10 pad-b-10 pad-l-15 flex v-align-c">
          <img v-if="fileSpace" class="width-13 height-13 mar-r-6" :src="fileSpace + '/images/save-icon.png'" alt="">
          <span>购物中如有问题，可联系客服，保障售后无忧</span>
        </div>
      </div>
    </div>
    <div v-if="order.crossBorderOrderType === 2" class="panel-cb-pl mar-b-10">
      <div class="flex v-align-c pad-b-2">
        <img class="width-15 height-13 mar-r-6" v-if="fileSpace" :src="fileSpace + '/images/icon-codeid-s.png'" alt="">
        <div class="font-13 c-cb-wr">跨境商品需提供付款人信息用以办理清关手续</div>
      </div>
      <div class="pad-l-21 font-15">
        <span class="mar-r-21">{{ order.certificateRealName }}</span>
        <span>{{ order.certificateNumber }}</span>
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-list-box pad-t-10 pad-l-16 pad-r-12 pad-b-1 mar-b-10">
      <div v-if="order.memberStoreTitle" class="shop-name pad-b-13 mar-b-11">
        <span class="font-color font-16">{{ order.memberStoreTitle }}</span>
      </div>
      <div class="mar-b-18">
        <div v-for="(item, index) in order.orderGoodsList" :key="index" class="mar-t-15">
          <div class="flex">
            <div class="goods-img-box mar-r-8 width-80 height-80 pos-rel">
              <!-- 跨境图标, 暂时不展示跨境标签 -->
              <!-- <div class="cross-border-pic">
                <img
                  v-if="fileSpace && item.crossBorderType === 2"
                  :src="fileSpace + '/images/icon-cross-border-s.png'"
                  class="icon-cross-border cross-s"
                  alt="">
              </div> -->
              <img class="width-80 height-80" v-if="item.goodsImageUrl" :src='item.goodsImageUrl' alt="">
            </div>
            <div class="flex-col goods-box-right">
              <div>
                <div class="flex v-align-c">
                  <div v-if="item.activityTypeLabel" class="tag-goods flex flex-center" :class="andType ? '' : 'iosType'">
                    <span>{{ item.activityTypeLabel }}</span>
                  </div>
                  <div class="_line-1 font-16 font-color flex-item">{{item.goodsTitle}}</div>
                </div>
                <div class="font-12 font-color-9">{{item.skuDetail}}</div>
              </div>
              <div class="flex goods-price-info">
                <div class="font-12 font-color-9 flex-col">                  
                  <div class="mar-l--2">
                    <span>￥{{ item.goodsPrice }}/件</span>
                    <span class="mar-l-13">共{{ item.goodsNum }}件</span>
                  </div>
                  <div v-if="item.taxAmount && (item.taxAmount * 1 > 0)" class="font-12 font-color-9 mar-t--3">税费：￥{{ item.taxAmount }}</div>
                </div>
                <!-- afterSaleStatus 商品售后状态  字段不存在时（undefined）是商品还没发起售后 -3:系统自动关闭 -2:顾客确认收货关闭  -1：已拒绝 0：待审核 1：待退货 2：退款中 3：已完成 4：已关闭 -->
                <!-- orderStatus 订单状态： -10: 待付货款 -2: 已付款取消 -1: 未付款取消 0: 未付款 1: 已付款 20: 部分发货 2: 已发货 3: 已收货 4: 已完成 -->
                <div v-if="order.orderStatus !== -2 && order.orderStatus !== -1 && order.orderStatus !== 0 && order.orderStatus !== 4 && order.crossBorderOrderType !== 2">
                  <div @click.stop="linkToDetail(item)"
                    v-if="(item.afterSaleStatus===0 || item.afterSaleStatus===1 || item.afterSaleStatus===2)">
                    <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25">退款中</div>
                  </div>
                  <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25"
                    v-else-if="item.afterSaleStatus===-3 || item.afterSaleStatus===4 || (item.afterSaleStatus===3 && (item.afterSaleGoodsNum===item.goodsNum))">退款关闭</div>
                  <div v-else-if="order.afterSaleStatus !== 1 || (order.afterSaleStatus === 1 && order.deliveryType ===1)">
                    <div @click.stop="linkToApply(item)"
                      v-if="orderStatusType !== '待发货' && (item.afterSaleStatus===-2 || item.afterSaleStatus===-1 || !item.afterSaleStatus || (item.afterSaleStatus===3 && (item.afterSaleGoodsNum<item.goodsNum)))" >
                      <div class="font-13 font-color retrun-btn flex flex-center width-56 height-25">售后</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 商品状态 (社群分销使用) start-->
          <div class="flex v-align-c typeState-i-b border-radius-5 mar-t-12 pad-l-15 pad-t-3 pad-b-3" v-if="order.deliveryType ===1 || order.deliveryType ===2">
            <div class="font-15 font-w pad-r-14">{{item.stateInfo.text}}</div>
            <div class="font-14">已发货{{item.deliveryNum}}件</div>
          </div>
          <!-- 商品状态 (社群分销使用) end-->
        </div>
      </div>
      <!-- 总额 优惠卷 实付-->
      <div class="mar-b-10">
        <div class=" font-color flex flex-between mar-b-8">
          <span class="font-16">商品总额</span>
          <span class="font-19 font-w"><span class="font-16 font-normal pad-r-3">¥</span>{{ order.goodsTotalPrice }}</span>
        </div>
        <div class="flex coupon-box mar-b-4" v-if="order.couponReduceAmount !== '0.00'">
          <div class="flex v-align-c">
            <span class="coupon-tag width-16 height-16 font-12 flex flex-center">券</span>
            <span class="font-16 mar-l-3">优惠券</span>
          </div>
          <span class="font-19 font-w red-color"><span class="font-16 font-normal pad-r-3">-¥</span>{{order.couponReduceAmount}}</span>
        </div>
        <div class="pad-t-2 pad-b-2 flex v-align-c mar-b-4">
          <span class="flex-item">运费</span>
          <label class="font-19 font-w"><span class="font-16 font-normal pad-r-3">¥</span>{{order.freight}}</label>
        </div>
        <div v-if="order.taxAmount * 1 > 0" class="pad-t-2 pad-b-2 flex v-align-c mar-b-4">
          <span class="flex-item">税费</span>
          <label class="font-19 font-w"><span class="font-16 font-normal pad-r-3">¥</span>{{order.taxAmount}}</label>
        </div>
        <div class="flex v-align-b">
          <div class="flex-item"></div>
          <span class="font-16 font-color-9 mar-b-6">实付:</span>
          <div>            
            <span class="font-16 font-color font-normal pad-r-3">¥</span>
            <span class="font-26 font-color font-w">{{order.actualPrice}}</span>
          </div>          
        </div>
      </div>
    </div>
    <!-- 备注 -->
    <div class="remarks-box font-16 pad-t-7 pad-b-7 pad-l-15 flex pad-r-15 v-align-c">
      <span class="font-color">备注：</span>
      <input type="text" class="font-color-9 flex-item" placeholder="选填，填写您的特殊需求 ">
    </div>
    <!-- 订单信息 -->
    <div class="flex-col order-info-box pad-t-10 pad-l-15 pad-b-20 pad-r-5">
      <div class="mar-b-8 flex v-align-c">
        <span class="font-14 font-color-9">订单编号</span>
        <span class="mar-l-20 flex-item">{{order.orderNo}}</span>
        <span
          @click="$pt.setClipboardData({data: order.orderNo})"
          class="font-12 red-color width-37 height-18 flex flex-center copy-btn mar-l-10">复制</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">下单时间</span>
        <span class="font-color mar-l-20">{{order.createTime}}</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">付款时间</span>
        <span class="font-color mar-l-20">{{order.payTime}}</span>
      </div>
      <div class="font-14 mar-b-8">
        <span class="font-color-9">提货时间</span>
        <span class="font-color mar-l-20" v-if="order.receivedTime">{{order.receivedTime}}</span>
      </div>
      <div class="font-14">
        <span class="font-color-9">完成时间</span>
        <span class="font-color mar-l-20" v-if="order.completeTime">{{order.completeTime}}</span>
      </div>
    </div>
    <div class="height-81 width-per-100"></div>
    <!-- 取消/取货码 -->
    <div class="btn-group-box flex pad-b-6 pad-l-15 pad-r-15 pad-t-9">
      <!-- 取消订单按钮，只有跨境订单类型才展示 -->
      <div v-if="cancleBtnBoolean" class="cancle-btn flex flex-center mar-r-16" @click="cancelToApply">
        取消订单
      </div>
      <!-- 跨境订单已经发起售后（退款）时，不可再退款，此时进入取消订单页 -->
      <div v-if="(order.deliveryType === 1 || order.deliveryType === 2) && order.orderStatus !== 0">
        <div v-if="normalCancleBtnResult && !cancelBoolean" class="cancle-btn flex flex-center mar-r-16" @click="linkToApply">
          批量售后
        </div>
      </div>
      <div v-if="order.orderStatus == 0"  @click="payOrder" class="get-code-btn flex flex-center">去支付</div>
    </div>
  </div>
</template>

<script>
import { getProjectOrder, payProjectOrder } from '@/api/distribution'
import { cancelOrder, checkCancelPaidOrder, doReceiveGoods } from '@/api/personal'
export default {
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  data() {
    return {
      showCodeAlert: false,
      urlFrom: '',
      nicknameAdd: '',
      phoneAdd: '',
      order: {}, // 订单详情结果信息
      goodsTotalPrice: '0.00',
      orderStatusText: '',
      orderStatusTips: '',
      orderStatusType: '',
      goodsListLen: 0,
      orderFrom: 0,
      submitStatus: false,
      storeName: '', // 门店名称
      sendTime: '', // 配送时间
      appName: '', // 提货码 app名称
      homeCancleBtnResult: false, // 门店类型--是否显示取消按钮
      groupCancleBtnResult: false, // 社区类型--是否显示取消按钮
      normalCancleBtnResult: false, // 社区分销类型-- 是否显示取消按钮
      andType: false,
      cancelBoolean: false,
      cancleBtnBoolean: false
    }
  },
  onReady() {
    this.urlFrom = this.getCurrentPage().query.urlFrom
    this.initEls()
  },
  onShow() {
    this.$pt.removeStorageSync('chooseLocation')
    if (this.$pt.getStorageSync('refundType')) {
      this.initEls()
    }
  },
  mounted() {
    let sysInfo = ''
    sysInfo = this.$pt.getSystemInfoSync()
    if (sysInfo.system.indexOf('iOS') === -1) {
      // android类型
      this.andType = true
    } else {
      this.andType = false
    }
  },
  methods: {
    initEls() {
      this.orderFrom = Number(this.getCurrentPage().query.orderFrom)
      this.appName = this.$pt.getStorageSync('appInfo').appName
      this.getOrder()
    },
    // 除去数组中的状态，都要显示，showNormalCancleBtn('已完成') 值为false
    showNormalCancleBtn(orderStatusType) {
      const RES = ['已取消', '已完成']
      return this.getResult(RES, orderStatusType)
    },
    getResult(RES, orderStatusType) {
      let result = RES.filter(item => item === orderStatusType)
      return result.length === 0
    },
    // 点击取消订单
    cancelToApply() {
      checkCancelPaidOrder({orderId: this.order.orderId, orderFrom: this.orderFrom}).then(response => {
        if (response.isError) return
        this.$pt.navigateTo({url: '/pages/personal/order/cancel-order/main?memberId=' + this.order.memberId + '&orderId=' + this.order.orderId})
      })
    },
    // 点击退货按钮
    linkToApply(val) {
      const {orderGoodsList} = this.order
      if (!val.apartOrderId) {
        // afterSaleStatus 商品售后状态  字段不存在时（undefined）是商品还没发起售后 -3:系统自动关闭 -2:顾客确认收货关闭  -1：已拒绝 0：待审核 1：待退货 2：退款中 3：已完成 4：已关闭
        if (this.order.crossBorderOrderType === 2 && this.order.orderStatus === 1) {
          // 跨境订单并且待发货，直接进入申请退款，整单退款
          let selectedOrderGoodsList = []
          let arr = []
          selectedOrderGoodsList = this.order.orderGoodsList
          selectedOrderGoodsList.forEach(item => {
            arr.push(item.orderGoodsId)
          })
          let orderGoodsIdStr = arr.join(',')
          this.$pt.navigateTo({url: `/pages/personal/order/refund-view/main?taxAmount=${this.order.taxAmount}&orderGoodsId=${orderGoodsIdStr}&sku=${JSON.stringify(selectedOrderGoodsList)}&orderId=${this.order.orderId}&storeGoods=1&orderStatusType=${this.orderStatusType}`})
          return
        }
        this.$pt.navigateTo({url: `/pages/personal/order/refund-goods/main?orderGoodsList=${JSON.stringify(orderGoodsList)}&orderId=${this.order.orderId}`})
      } else {
        this.$pt.navigateTo({url: `/pages/personal/order/refund-view/main?sku=${JSON.stringify(val)}&orderStatusType=${this.orderStatusType}&orderGoodsId=${val.orderGoodsId}`})
      }
    },
    // 导航前往
    goWxLocal() {
      if (!this.order.memberStore.latitude || !this.order.memberStore.longitude) {
        this.$pt.reLaunch({url: '/pages/home/main'})
      }
      this.$pt.setStorageSync('chooseLocation', true)
      this.$pt.openLocation({
        latitude: Number(this.order.memberStore.latitude),
        longitude: Number(this.order.memberStore.longitude),
        address: this.order.memberStore.storeAddress
      })
    },
    payOrder() {
      if (this.submitStatus) {
        // 防重复提交
        return
      }
      this.submitStatus = true
      payProjectOrder(this.order.orderId).then(response => {
        if (response.isError) {
          this.submitStatus = false
          return
        }
        const that = this
        const payParams = response.data
        let resType = ''
        if (this.order.orderType === 30) {
          resType = '20'
        } else {
          resType = '10'
        }
        that.$pt.requestPayment({
          'timeStamp': payParams.timeStamp,
          'nonceStr': payParams.nonceStr,
          'package': payParams.package,
          'signType': payParams.signType,
          'paySign': payParams.paySign,
          'success': function(res) {
            that.submitStatus = false
            that.$pt.redirectTo({ url: '/pages/shop/result/main?successFlag=1&price=' + payParams.price +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
          },
          'fail': function(res) {
            console.log(res)
            that.submitStatus = false
            that.$pt.navigateTo({ url: '/pages/shop/result/main?successFlag=0&price=' + payParams.price +
                '&orderId=' + that.order.orderId + '&resType=' + resType })
          }
        })
      })
    },
    // 拨打电话
    // 拨打电话
    callPhone() {
      if (!this.order.memberStore.storePhone && !this.order.storePhone) {
        this.$pt.showToast({
          icon: 'none',
          title: '暂无可联系电话！'
        })
        return
      }
      this.$pt.makePhoneCall({
        phoneNumber: this.order.memberStore.storePhone || this.order.storePhone
      })
    },
    getOrder() {
      const orderId = this.getCurrentPage().query.orderId
      if (!orderId) {
        return
      }
      getProjectOrder(orderId).then((response) => {
        if (response.isError) return
        // response.data.addressLabel = '学校'
        this.order = response.data
        this.order.statusOverNum = 0
        if ('deliveryTime' in response.data) {
          this.sendTime = `${this.getCurrentDate(response.data['deliveryTime'].replace(/-/g, '/'))} ${this.getCurrentTime(response.data['deliveryTime'].replace(/-/g, '/'))}`
        }
        // 收货人信息
        this.nicknameAdd = response.data.customerNickname
        this.phoneAdd = response.data.customerPhone
        if ('addressLabel' in this.order) {
          switch (this.order.addressLabel) {
            case '公司':
              this.order.labelStyle = 1
              break
            case '家':
              this.order.labelStyle = 2
              break
            case '其他':
              this.order.labelStyle = 3
              break
            case '学校':
              this.order.labelStyle = 4
              break
          }
        }
        // this.addressAdd = response.data.customerAddress
        // this.memberAvatar = response.data.memberAvatar
        // this.customerServiceType = response.data.customerServiceType ? response.data.customerServiceType : ''
        // this.customerServiceFlag = response.data.customerServiceFlag
        switch (this.order.orderStatus) {
          case -2:
            this.orderStatusType = '已取消'
            this.orderStatusText = '订单已取消'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case -1:
            this.orderStatusType = '已取消'
            this.orderStatusText = '订单已取消'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case 0:
            this.orderStatusType = '未付款'
            this.orderStatusText = '等待买家付款'
            this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
            break
          case 1:
            this.orderStatusType = '待发货'
            if (this.order.orderType === 10) {
              this.orderStatusText = '等待卖家发货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            } else {
              this.orderStatusText = '等待卖家发货'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            }
            break
          case 2:
            this.orderStatusType = '已发货'
            if (this.order.orderType === 10) {
              this.orderStatusText = '物流派送中'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            } else {
              this.orderStatusText = '物流派送中'
              this.orderStatusTips = '如有问题可在下方联系卖家'
            }
            break
          case 3:
            this.orderStatusType = '已收货'
            this.orderStatusText = '订单已收货'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case 4:
            this.orderStatusType = '已完成'
            this.orderStatusText = '订单已完成'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            break
          case 20:
            this.orderStatusType = '部分已发货'
            this.orderStatusText = '物流派送中'
            this.orderStatusTips = '如有问题可在下方联系卖家'
            // this.orderStatusType = '待发货'
            // this.orderStatusText = '等待卖家发货'
            // this.orderStatusTips = '如有问题可在下方联系卖家'
            break
        }
        if (this.order.deliveryType === 2) {
          switch (this.order.verifyStatus) {
            case 1:
              this.orderStatusType = '待核销'
              this.orderStatusText = '订单已取消'
              this.orderStatusTips = '如有问题可在下方联系卖家'
              break
            case 3:
              this.orderStatusType = '已收货'
              this.orderStatusText = '等待买家付款'
              this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
              break
            case 4:
              this.orderStatusType = '已完成'
              this.orderStatusText = '等待买家付款'
              this.orderStatusTips = '请在24小时内完成支付，逾期支付，订单将自动取消'
              break
          }
        }
        let total = 0
        if (this.order && this.order.orderGoodsList) {
          this.goodsListLen = this.order.orderGoodsList.length
          this.order.orderGoodsList.forEach(goods => {
            let price = goods.goodsPrice * goods.goodsNum
            total += price
            if (goods.sellerWords) {
              goods.sellerWords = this.$utils.getStrByLength(goods.sellerWords, 38)
            }
            // 商品状态 发货数量 = 0 (待发货)、未发货数量 - 售后数量 = 0 (已发货)、商品数量 - 已发货数量 = 0(已发货) 、未发货数量 - 售后数量 > 0 (部分发货)
            if (this.orderStatusType === '未付款') {
              this.$set(goods, 'stateInfo', {text: '未付款', color: '#FF0101'})
            } else if (goods.deliveryNum === 0 && this.orderStatusType !== '未付款') {
              this.$set(goods, 'stateInfo', {text: '待发货', color: '#FF0101'})
            } else {
              let disDeliveryNum = Number(goods.goodsNum - goods.deliveryNum) // 未发货数量
              if (Number(disDeliveryNum - goods.afterSaleGoodsNum) === 0 || disDeliveryNum === 0) {
                this.$set(goods, 'stateInfo', {text: '已发货', color: '#19BE5A'})
              }
              if (Number(disDeliveryNum - goods.afterSaleGoodsNum) > 0) {
                this.$set(goods, 'stateInfo', {text: '已发货', color: '#F6AA23'})
              }
            }
          })
        }
        this.goodsTotalPrice = total.toFixed(2)
        this.order.orderGoodsList.forEach((item, index) => {
          if (item.afterSaleStatus === -3 || item.afterSaleStatus === 4 || (item.afterSaleStatus === 3 && (item.afterSaleGoodsNum === item.goodsNum))) {
            this.order.statusOverNum++
          }
        })
        if (this.order.deliveryType === 1 || this.order.deliveryType === 2) {
          // 除去数组中的状态，都要显示，showNormalCancleBtn('已完成') 值为false
          this.normalCancleBtnResult = this.showNormalCancleBtn(this.orderStatusType) && this.order.cancelFlag === 0 && this.order.crossBorderOrderType !== 2
          if (this.order.crossBorderOrderType === 2 && this.order.orderStatus !== 1 && this.order.orderStatus !== 0) {
            this.normalCancleBtnResult = this.showNormalCancleBtn(this.orderStatusType) && this.order.cancelFlag === 0
          }
        }
        // 商品详情，取消订单按钮展示
        if (this.order.crossBorderOrderType === 2 && this.order.orderStatus === 1 && this.order.deliveryType === 1) {
          this.cancleBtnBoolean = (this.order.warehouseCustomsStatus === 4 || this.order.paymentOrderCustomsStatus === 7) || (this.order.warehouseCustomsStatus === 1 && this.order.paymentOrderCustomsStatus === 1)
        }
        // 跨境订单已经发起售后（退款）时，不可再退款，此时进入取消订单页
        this.cancelBoolean = false
        if (this.order.crossBorderOrderType === 2 && this.order.orderGoodsList && this.order.orderGoodsList[0].afterSaleStatus && this.order.orderGoodsList[0].afterSaleStatus > 0) {
          this.cancelBoolean = true
        }
      }).catch(() => {
      })
    },
    // 获取当前时间 时分秒
    getCurrentTime(t) {
      const date = new Date(t)
      const hour = date.getHours()
      const minute = date.getMinutes() > 10 ? date.getMinutes() : `0${date.getMinutes()}`
      return `${hour}:${minute}`
    },
    // 获取当前年月日
    getCurrentDate(t) {
      const date = new Date(t)
      const month = date.getMonth() + 1
      const day = date.getDate()
      return `${month}月${day}日`
    },
    cancelOrder() {
      // 取消订单事件
      // 订单里面都没有发货才可以取消订单，到订单取消页面
      // 否则提示联系卖家处理
      if (this.order.orderStatus === 20) {
        this.$utils.showToast({
          title: '已部分发货无法取消'
        })
        return
      }
      if (this.order.orderStatus === 0) {
        const that = this
        this.$pt.showModal({
          title: '温馨提示',
          content: '确认取消订单?',
          success: res => {
            if (res.confirm) {
              cancelOrder({orderId: that.order.orderId, orderFrom: that.orderFrom}).then(response => {
                if (response.isError) return
                that.$utils.showToast({ title: '取消成功' })
                that.order = {}
                that.getOrder()
              })
            }
          }
        })
      } else {
        checkCancelPaidOrder({orderId: this.order.orderId, orderFrom: this.orderFrom}).then(response => {
          if (response.isError) return
          this.$pt.navigateTo({url: '/pages/personal/order/cancel-order/main?memberId=' + this.order.memberId + '&orderId=' + this.order.orderId})
        })
      }
    },
    // 确认收货
    doReceiveGoods(order) {
      if (order.orderStatus === 20) return
      const that = this
      this.$pt.showModal({
        content: '是否确认收货？',
        success(res) {
          if (res.confirm) {
            that.order.orderFrom = that.orderFrom
            doReceiveGoods({
              memberId: that.order.memberId,
              orderId: that.order.orderId,
              orderFrom: that.order.orderFrom
            }).then(response => {
              if (response.isError) return
              that.$utils.showToast({ title: '确认收货成功' })
              that.order = {}
              that.getOrder()
            })
          } else if (res.cancel) {
            console.log('用户取消')
          }
        }
      })
    },
    linkToDetail(sku) {
      sku.orderId = this.order.orderId
      let value = JSON.stringify(sku)
      this.$pt.navigateTo({url: `/pages/personal/order/refund-detail/main?sku=${value}`})
    }
  }
}
</script>

<style lang="less" scoped>
  .typeState-i-b{
    background: #fbfafa;
  }
  .panel-cb-pl{
    background: #fff;
    border-radius: 10px;
    padding: 13px 15px 11px 15px;
  }
  .c-cb-wr{
    color: #FF243D;
  }
  .tag-goods{
    font-style: italic;
    font-weight: normal;
    color: #fff;
    font-size: 12px;
    margin-right: 5px;
    margin-bottom: -2px;
    box-sizing: border-box;
    width: 37px;
    height: 18px;
    line-height: unset!important;
    background: url('https://veekrayimg.joinsun.vip/images/shop-tag.png') no-repeat;
    // background: #ec3b1f;
    background-size: 100% 100%;
    &.iosType{
      span{
        margin-bottom: -2px;
      }
    }
    span{
      margin-left: -5px;
    }
  }
  .label-ad-sp{
    display: inline-block;
    vertical-align: top;
  }
  .label-2{
    background: #FFEAEC;
    border-radius: 3px;
    color: #FF243D;
  }
  .label-3 {
    background: #FFEAEC;
    border-radius: 3px;
    color: #FF243D;
  }
  .label-1 {
    background: #E6F0FF;
    border-radius: 3px;
    color: #0066FF;
  }
  .label-4 {
    background: #EBEDFF;
    border-radius: 3px;
    color: #7427FF;
  }
  .pic-tips-bar{
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    text-align: center;
    padding: 3px 7px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
  }
  .limit-box {
    color: #3aa97b;
    .limit-info {
      background: #f6fffb;
      border: 1px solid #bee0d2;
      border-radius: 5px;
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 3px;
      padding-bottom: 3px;
      position: relative;
      .tag-1 {
        position: absolute;
        bottom: -4px;
        left: 14px;
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 4px solid #f6fffb;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        z-index: 5;
      }
      .tag-2 {
        position: absolute;
        bottom: -6px;
        left: 12px;
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 6px solid #bee0d2;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        z-index: 4;
      }
    }
  }
  .delivery-info-box {
    background: #fff;
    position: relative;
    margin-top: 12px;
    border-radius: 10px;
    .panel-box {
      border-radius: 10px;
      .panel-body {
        border-radius: 10px;
        box-shadow: 0px 1px 1px rgba(195, 195, 195, 0.22);
        .address-info {
          .address-tag {
            background: rgba(255,36,61,0.16);
            border-radius: 3px;
          }
        }
        .self-address-info {
          justify-content: space-between;
        }
        .address-box {
          justify-content: space-between;
          align-items: flex-start;
        }
        .btn-box {
          color: #0376FF;
          .v-line {
            overflow: hidden;
            font-size: 12px;
            color: #c5c5c5;
            position: relative;
            top: -2px;
          }
        }
      }
    }
    .prompt {
      color: #A68589;
      border-radius: 0px 0px 10px 10px;
      box-sizing: border-box;
    }
  }
  .goods-list-box {
    background: #fff;
    border-radius: 10px;
    .shop-name {
      border-bottom: 0.5px solid #f5f5f5;
    }
    .goods-img-box {
      img {
        border-radius: 10px;
      }
    }
    .goods-box-right {
      justify-content: space-between;
      flex: 1;
      min-height: 83px;
      .goods-price-info {
        justify-content: space-between;
        align-items: flex-end;
        .retrun-btn {
          border: 1px solid #E3E3E3;
          border-radius: 13px;
        }
      }
    }
    .coupon-box {
      justify-content: space-between;
      .coupon-tag {
        background: #FF243D;
        color: #fff;
        border-radius: 2px;
      }
    }
  }
  .order-info-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    // margin-bottom: 68px;
    .copy-btn {
      border: 1px solid #FF243D;
      border-radius: 9px;
    }
  }
  .remarks-box {
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
  }
  .red-color {
    color: #FF243D;
  }
  .gray-bg-color {
    background: #F5F5F5;
  }
  .btn-group-box {
    background: #fff;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    justify-content: flex-end;
    .cancle-btn {
      color: #FF243D;
      background: #fff;
      width: 112px;
      height: 38px;
      border-radius: 19px;
      border: 1px solid #FF243D;
    }
    .get-code-btn {
      color: #fff;
      background: #FF243D;
      width: 112px;
      height: 38px;
      border-radius: 19px;
    }
  }
  .code-box {
    .alert-bg {
      background: #FF243D;
      border-radius:0px 0px 10px 10px;
    }
    .subject {
      align-items: center;
      .dots {
        margin-right: 4px;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
      }
    }
    .code-area {
      background: #fff;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      // top: -57px;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0px 1px 11px 0px rgba(255, 139, 152, 0.31);
    }
    .remark-text {
      margin-top: -35px;
      margin-bottom: 19px;
    }
  }
  ._line-1{
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
</style>
